<template>
  <div class="my-product">
    <h3>标题: {{ title }} </h3>
    <p>价格: {{ price }}元</p>
    <p>{{info}}</p>
    <button @click="kanFn">砍价</button>
  </div>
</template>

<script>
export default {
    props: ["title", "price", "info"],
    methods: {
      kanFn(){
        // 直接修改价格，会报错
        /**
         * 因为：
         *  1、子组件直接修改，不通知父组件，会造成父子组件数据不一致
         *  2、vue规定了props中的变量“只读” （也就是只能拿来用不能修改）
         * 
         * 单向数据流：像这种只能从父到子的数据流向，叫单向数据流
         */ 
        this.price = this.price - 1;
      }
    }
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>